<!-- 简单的编辑面板 -->
<template>
  <div class="pdca-report">
    <CommonDialog ref="PicBed" top="50px" height="90vh" width="1200px" />
    <div class="space-between">
      <button-group :btn-group="btnGroup" style="margin-bottom: 10px;" @submit-click="handleSubmit" @close-click="handleClose" @pic-bed-click="handleOpenPicBed" />
      <div class="switch-box">
        <el-switch
          v-model="mdMode"
          style="display: block"
        />
        <span>MD模式</span>
      </div>
    </div>
    <el-input
      v-if="!mdMode"
      v-model="dialogData.content"
      type="textarea"
      rows="30"
      placeholder="请输入内容"
    />
    <v-md-editor v-else v-model="dialogData.content" height="640px" />
  </div>
</template>

<script>
export default {
  props: {
    dialogData: {
      type: Object,
      default: () => ({
        key: '', // 编辑的键
        content: '' // 编辑的内容
      })
    }
  },
  data() {
    return {
      mdMode: false,
      btnGroup: [
        { type: 'primary', text: '保存', action: 'submit' },
        { type: '', text: '取消', action: 'close' },
        { type: 'primary', text: '图床', action: 'pic-bed' }
      ]
    }
  },
  methods: {
    // 打开图床
    handleOpenPicBed() {
      this.$refs.PicBed.handleShow('PicBed', '图床')
    },
    // 提交保存
    handleSubmit() {
      this.$emit('submit', this.dialogData)
      this.$emit('handleClose')
    },
    // 取消
    handleClose() {
      this.$emit('handleClose')
    }
  }
}
</script>

<style lang="scss" scoped>
.space-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pdca-report {
  padding: 10px;
  .switch-box {
    display: flex;
    align-items: center;

    span {
      margin-left: 6px;
      display: inline-block;
      width: 50px;
    }
  }
}
</style>
